<template>
    <div class="box-card box-minheight">
        <div class="card-header">
            <span>{{ curRouteName }}</span>
        </div>
        <div class="box-content">
            <el-form ref="form" :model="formData" :rules="formRules" label-width="120px" label-position="right">
                <el-row :gutter="40">
                    <el-col :span="12">
                        <div class="header"><span>DI输入取反</span></div>
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-checkbox v-model="formData.DI1" :true-label="1" :false-label="0">DI1</el-checkbox>
                            </el-col>
                            <el-col :span="6">
                                <el-checkbox v-model="formData.DI2" :true-label="1" :false-label="0">DI2</el-checkbox>
                            </el-col>
                            <el-col :span="6">
                                <el-checkbox v-model="formData.DI3" :true-label="1" :false-label="0">DI3</el-checkbox>
                            </el-col>
                            <el-col :span="6">
                                <el-checkbox v-model="formData.DI4" :true-label="1" :false-label="0">DI4</el-checkbox>
                            </el-col>
                            <!-- <el-col :span="6" class="mt20">
                                <el-checkbox v-model="formData.DI5" :true-label="1" :false-label="0">DI5</el-checkbox>
                            </el-col>
                            <el-col :span="6" class="mt20">
                                <el-checkbox v-model="formData.DI6" :true-label="1" :false-label="0">DI6</el-checkbox>
                            </el-col>
                            <el-col :span="6" class="mt20">
                                <el-checkbox v-model="formData.DI7" :true-label="1" :false-label="0">DI7</el-checkbox>
                            </el-col>
                            <el-col :span="6" class="mt20">
                                <el-checkbox v-model="formData.DI8" :true-label="1" :false-label="0">DI8</el-checkbox>
                            </el-col> -->
                        </el-row>
                    </el-col>
                    <el-col :span="12">
                        <div class="header"><span>DO输出取反</span></div>
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-checkbox v-model="formData.DO1" :true-label="1" :false-label="0">DO1</el-checkbox>
                            </el-col>
                            <el-col :span="6">
                                <el-checkbox v-model="formData.DO2" :true-label="1" :false-label="0">DO2</el-checkbox>
                            </el-col>
                            <el-col :span="6">
                                <el-checkbox v-model="formData.DO3" :true-label="1" :false-label="0">DO3</el-checkbox>
                            </el-col>
                            <el-col :span="6">
                                <el-checkbox v-model="formData.DO4" :true-label="1" :false-label="0">DO4</el-checkbox>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>


                <div class="right-btn">
                    <el-button type="primary" @click="submitForm">确定</el-button>
                </div>
            </el-form>

        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { ref, computed } from 'vue'
//获取路由对象
let $route = useRoute()
// 计算出当前路由名称
let curRouteName = computed(() => {
    return $route.matched[$route.matched.length - 1].meta.title
})

const form = ref(null)
const formData = ref({
    DI1: '',
    DI2: '',
    DI3: '',
    DI4: '',
    DI5: '',
    DI6: '',
    DI7: '',
    DI8: '',
    DO1: '',
    DO2: '',
    DO3: '',
    DO4: '',

});

const validatePassword = (rule: any, value: string, callback: any) => {
    const pattern = /^[a-zA-Z0-9]{4,12}$/;
    if (!pattern.test(value)) {
        callback(new Error('新密码必须由4-12位数字或字母组成'));
    } else {
        callback();
    }
};

const validateConfirmPassword = (rule: any, value: string, callback: any) => {
    if (value !== formData.value.password) {
        callback(new Error('两次输入的密码不一致'));
    } else {
        callback();
    }
};
const formRules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'change' },
    ],
    password: [
        { required: true, message: '请输入新密码', trigger: 'change' },
        { validator: validatePassword, trigger: 'change' },
    ],
    confirmPassword: [
        { required: true, message: '请再次输入新密码', trigger: 'change' },
        { validator: validateConfirmPassword, trigger: 'change' },
    ],
};


const submitForm = () => {
    form.value.validate((valid: boolean) => {
        if (valid) {
            // 表单验证通过，可以进行提交操作
            // ...
        } else {
            // 表单验证不通过，进行错误处理
            return false;
        }
    });
};


</script>

<style scoped lang="scss">
.header {
    font-size: 18px;
    border-bottom: 1px solid #dedede;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.right-btn {
    text-align: center;
    margin-top: 30px;
}
</style>